<template>
  <div class="container">
    <div class="header clearfix">
      <div class="left">
        搜索发现
      </div>
      <div class="right"
           @tap="close_discovery()">
        <img :src="show_discovery?base_img+'mp_2.7/open.png':base_img+'mp_2.7/close.png'"
             v-if="base_img"
             mode="widthFix"
             alt=""
             class="img">
      </div>
    </div>
    <ul class="list clearfix"
        v-if="show_discovery">
      <li class="list-item"
          v-for="(item, index) in discovery_list"
          :key="index"
          @tap="select_key (item)">
        {{item.value}}
      </li>
    </ul>
    <div class="close_txt"
         v-else>
      当前搜索发现已隐藏
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      discovery_list: [],
      imgUrl: common.image_response,
      base_img: common.image_resource,
      show_discovery: true
    };
  },
  methods: {
    get_discovery () {
      common.fly_post("api/v4_2/search/search_find", {}, result => {
        let res = result.data
        if (res.status_code == '0') {
          this.discovery_list = res.data
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // 关闭探索发现
    close_discovery () {
      this.show_discovery = !this.show_discovery
      wx.setStorage({
        key: 'discovery',
        data: this.show_discovery
      });
    },
    select_key (item) {
      this.$emit("select_key", item.value);
    }
  },
  mounted () {
    wx.getStorage({
      key: 'discovery',
      success: (res) => {
        this.show_discovery = res.data
      },
      fail: () => { },
      complete: () => { }
    })
    this.get_discovery();
  }
};
</script>

<style lang="less" scoped>
.container {
  .header {
    margin-top: 15px;
    padding: 0 15px;
    margin-bottom: 10px;
    position: relative;
    .left {
      float: left;
      font-size: 14px;
      font-family: "Medium";
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 16px;
    }
    .right {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      .img {
        width: 20px;
        height: 12px;
        display: block;
      }
    }
  }
  .list {
    margin: 0 15px;
    box-sizing: border-box;
    .list-item {
      max-width: 100%;
      line-height: 30px;
      border-radius: 30px;
      padding: 0 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      background: rgba(231, 231, 231, 1);
      font-size: 12px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      float: left;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  .close_txt {
    font-size: 12px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
    text-align: center;
  }
}
</style>

